<template>
  <div class="ranklist">
    <div class="title">
      <h1>排行榜</h1>
      <div class="more" @click="toRank"><span>更多</span><van-icon class="icon" name="arrow"/></div>
    </div>
    <div class="wrapper" ref="wrapper">
      <ul class="content" ref="content">
        <li
          v-for="item in ranklistData.slice(0, 3)"
          :key="item.content_id"
          @click="selectRankList(item)"
        >
          <div class="rank-item">
            <div class="rank-item-left">
              <img :src="item.coverImgUrl" alt="" />
            </div>
            <div class="rank-item-right">
              <span class="item-update">{{ item.updateFrequency }}</span>
              <div
                class="song-item"
                v-for="(song,index) in item.tracks"
                :key="song.index"
              >
                <span class="item-num">{{index+1}}. </span>
                <span class="item-song">{{ song.first }}</span>
                <span class="item-singer"> - {{ song.second }}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      ranklistData: [],
    };
  },
  created() {
    this.ranklistData;
  },
  methods: {
    getRankList() {
      axios
        .get("api/toplist/detail", "")
        .then((res) => {
          console.log(res.data.list);
          this.ranklistData = res.data.list;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectRankList(item) {
      const id = item.content_id;
      this.$router.push({
        path: `/ranklistdetail/${id}`,
      });
    },
    toRank(){
      this.$router.push('/rank');
    }
  },
  mounted() {
    this.getRankList();
  },
  filters: {
    numFilter(value, num) {
      return parseFloat(value).toFixed(num);
    },
  },
};
</script>

<style scoped>
.ranklist {
  width: 94%;
  margin: 0 auto;
}
.title{
  text-align: left;
}
.title > h1 {
  display: inline-block;
  font-size: 18px;
  text-align: left;
}
.more{
  float: right;
  position: relative;
  top: 14px;
  border-radius: 20px;
  border: #666666 1px solid;
  padding:2px 5px;
  color: #666666;
  font-size: 8px;
}
.more>.icon{
  position: relative;
  top: 1px;
}
.wrapper {
  width: 100%;
  overflow: hidden;
}
ul.content {
  text-align: center;
}
ul.content > li {
  width: 100%;
  height: 120px;
  display: block;
  text-align: left;
  cursor: pointer;
  margin-bottom: 20px;
}
.rank-item {
  height: 120px;
  border-radius: 10px;
  background: #fafafa;
}
.rank-item-left {
  height: 120px;
  width: 30%;
  display: inline-block;
}
.rank-item-left > img {
  width: 120px;
  height: 120px;
  border-radius: 10px;
}
.rank-item-right {
  float: right;
  padding: 10px;
  width: 63%;
}
.item-update {
  display: block;
  text-align: right;
  font-size: 10px;
  color: #cecece;
}
.song-item {
  text-align: left;
  width: 100%;
  font-size: 14px;
  overflow: hidden;
  height: 28px;
  line-height: 28px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-num {
  font-weight: 600;
}
.item-song {
}
.item-singer {
  color: #a7a7a7;
}
</style>
